<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条4</title>
    <style>
        .loading{width: 100%; height: 100%; position: fixed; top:0; left: 0; z-index: 100; background-color: #fff;}
        .loading .pic{width: 0%; height: 5px; position: absolute; top:0; left:0; background-color: #F33;}
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        /*document.onreadystatechange = function () {
            if(document.readyState=="complete"){
                $(".loading").fadeOut();
            }
        }*/
    </script>
</head>
<body>
<div class="loading">
    <div class="pic">
    </div>
</div>
<header>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907189&di=e5d7a0fac81deee621476c0caf6c77e2&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd043ad4bd11373f07e4db35ead0f4bfbfaed0485.jpg" alt="">
</header>

<script>
    $(".loading .pic").animate({width: "10%"}, 100);
</script>

<section class="banner">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907188&di=52c036116a09a38bc58ae8db0bc91fb8&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fcc11728b4710b912b171853ecafdfc03934522b9.jpg" alt="">
</section>

<script>
    $(".loading .pic").animate({width: "30%"}, 100);
</script>

<section class="about">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907188&di=cff0d9ae5339750315f6f0b76e4d8755&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F5882b2b7d0a20cf4db0ab51f7f094b36adaf995c.jpg" alt="">
</section>

<script>
    $(".loading .pic").animate({width: "50%"}, 100);
</script>

<section class="pro">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907187&di=65c2626c3973ffe6e93cd3d2e58f425c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6609c93d70cf3bc76007402dd800baa1cc112ae8.jpg" alt="">
</section>

<script>
    $(".loading .pic").animate({width: "80%"}, 100);
</script>

<section class="news">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907367&di=2d526d2b89fd08df7523d6df74f37222&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fcc11728b4710b9128942bd3ecafdfc039345226a.jpg" alt="">
</section>

<script>
    $(".loading .pic").animate({width: "95%"}, 100);
</script>
<footer></footer>

<script>
    $(".loading .pic").animate({width: "100%"}, 100, function () {
        $(".loading").fadeOut();
    });
</script>
</body>
</html>